import {
  deleteUserPermissionApi,
  getUserPermissionListApi,
} from '@/services/api';
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm, Tag, message } from 'antd';
import { isEqual } from 'lodash';
import React, { useRef, useState } from 'react';
import CreateBindRuleDrawer from '../Drawer/CreateBindRuleDrawer';

const PermissionsList: React.FC = () => {
  const actionRef = useRef<ActionType>();

  const [createRuleDrawerParams, setCreateRuleDrawerParams] = useState({
    open: false,
    info: {},
    type: 'add',
  });

  const columns: any = [
    {
      title: '名称',
      dataIndex: 'label',
      hideInSearch: true,
    },
    {
      title: '权限',
      dataIndex: 'value',
      hideInSearch: true,
    },
    {
      title: '类型',
      dataIndex: 'leaf',
      hideInSearch: true,

      render: (text: any, record: any) => {
        return (
          <>
            {text ? (
              <Tag bordered={false} color="error">
                按钮
              </Tag>
            ) : (
              <Tag bordered={false} color="cyan">
                菜单
              </Tag>
            )}
          </>
        );
      },
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      width: 138,
      render: (text: any, record: any) => [
        <a
          key="editable"
          onClick={() => {
            setCreateRuleDrawerParams({
              open: true,
              info: {
                id: record?.id,
              },
              type: 'add',
            });
          }}
        >
          新增
        </a>,
        <a
          key="editable"
          onClick={() => {
            setCreateRuleDrawerParams({
              open: true,
              info: record,
              type: 'edit',
            });
          }}
        >
          编辑
        </a>,
        <Popconfirm
          key="bofan"
          title={`确定删除该权限- ${record?.label}`}
          onConfirm={async () => {
            try {
              await deleteUserPermissionApi(record?.id);
              message.success('删除成功');
              actionRef.current?.reload();
            } catch (error) {}
          }}
          okText="Yes"
          cancelText="No"
        >
          <Button className="_common_card_left_item_btn" type="link" danger>
            删除
          </Button>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <>
      <ProTable
        bordered
        columns={columns}
        actionRef={actionRef}
        cardBordered
        // scroll={{ x: 1200 }}
        request={async (_parame) => {
          const { pageSize, current, ...ret } = _parame;
          const { data, count } = await getUserPermissionListApi({
            page: current,
            size: pageSize,
            ...ret,
          });
          return {
            data: data ?? [],
            success: true,
            total: data?.count,
          };
        }}
        rowKey="id"
        search={false}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          defaultPageSize: 10,
        }}
        dateFormatter="string"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateRuleDrawerParams({
                open: true,
                info: {},
                type: 'add',
              });
            }}
            type="primary"
          >
            新增权限
          </Button>,
        ]}
      />

      {createRuleDrawerParams.open && (
        <CreateBindRuleDrawer
          open={createRuleDrawerParams.open}
          info={createRuleDrawerParams.info}
          close={() => {
            setCreateRuleDrawerParams({
              open: false,
              info: '',
              type: 'add',
            });
          }}
          onFinish={() => {
            setCreateRuleDrawerParams({
              open: false,
              info: '',
              type: 'add',
            });
            actionRef.current?.reload();
          }}
          type={createRuleDrawerParams?.type}
        ></CreateBindRuleDrawer>
      )}
    </>
  );
};
export default React.memo(PermissionsList, (prev, next) => isEqual(prev, next));
